<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>配送地址</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/peisong.css">
</head>
<body>
	<div class="page">
		<!--<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><span>返回</span></a>
	      	<h1 class="mui-title">道德抄经堂</h1>
	    </header>-->
	    <div class="content">
	    	<div class="order">
	    		<table id="deliverTable">
	    			<tr>
	    				<td class="tb_left" >
	    					<a class="fang" style="color: #bda932;font-size: 14px;">张三<span style="margin-left: 50px;">15770896001</span></a><br />
	    					<p>背景北京北京五台山</p>
	    				</td>
	    				<td class="tb_right">
	    					<p style="margin-top: 9px;">100本</p>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td class="tb_left" >
	    					<a class="fang" style="color: #bda932;font-size: 14px;">张三<span style="margin-left: 50px;">15770896001</span></a><br />
	    					<p>背景北京北京五台山</p>
	    				</td>
	    				<td class="tb_right">
	    					<p style="margin-top: 9px;">100本</p>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td class="tb_left" style="padding-top: 10px;">
	    					<p>五台山五台山五台山五台山</p>
	    				</td>
	    				<td class="tb_right" style="padding-top: 10px;">
	    					<p>100本</p>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td class="tb_left" style="padding-top: 10px;">
	    					<p>五台山五台山五台山五台山</p>
	    				</td>
	    				<td class="tb_right" style="padding-top: 10px;">
	    					<p>100本</p>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td class="tb_right" style="padding-top: 10px;">
	    					<p>共400本</p>
	    				</td>
	    			</tr>
	    		</table>
	    		<div class="total">
	    			<p>
						总计：￥
						<span id="totalPrice">
							8.00
						</span>
						<a href="./yinshuashuoming.html?reurl=peisong.html">
							<span class="zhuyi">i</span>
						</a>
					</p>
	    		</div>
	    	</div> 
	    	<div class="button">
	    		<div class="single_button right">
	    			<a href="pay_print.html?reurl=bushi.html">
	    				<button class="cover ok">结算</button>
	    			</a>
	    		</div>
	    	</div>
	    </div>
	</div>
</body>
<script src="../bower_components/mui/dist/js/mui.min.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../js/common.js"></script>
<script>

	function loadSelectedAddressList() {
		var addressList = JSON.parse(localStorage.getItem("selectedAddressList"))
		var html = "";

		for (var i = 0; i < addressList.length; i++) {
			var address = addressList[i];
			console.log(address);

			if(address.type == "address") {
				html +=
	    			'<tr>' +
	    				'<td class="tb_left" >' +
	    					'<a class="fang" style="color: #bda932;font-size: 14px;">' + address.contact + '<span style="margin-left: 50px;">' + address.phone + '</span></a><br />' +
	    					'<p>' + address.address + '</p>' +
	    				'</td>' +
	    				'<td class="tb_right">' +
	    					'<p style="margin-top: 9px;">' + address.num + '本</p>' +
	    				'</td>' +
					'</tr>';
			} else if (address.type == "donation"){
				html +=
	    			'<tr>' +
	    				'<td class="tb_left" style="padding-top: 10px;">' +
	    					'<p>' + address.name + '</p>' +
	    				'</td>' +
	    				'<td class="tb_right" style="padding-top: 10px;">' +
	    					'<p>' + address.num + '本</p>' +
	    				'</td>' +
					'</tr>';
			}
		}
		$("#deliverTable").html(html);
	}

	$(function () {
		loadSelectedAddressList();

	    var vid = localStorage.getItem('versionId');
	    var userTranscriptionID = localStorage.getItem('userTranscriptionID');
		var csrftoken = getCookie('csrftoken');
		var addressList = JSON.parse(localStorage.getItem("selectedAddressList"));
		var totalNum = 0;
		for (var i = 0; i < addressList.length; i++ ){
			totalNum += addressList[i].num;
		}

		$.ajax({
			url: '/fe/print/user_transcription/' + userTranscriptionID + '/price_calculate',
			method: "POST",
			beforeSend: function (xhr, settings) {
				xhr.setRequestHeader("X-CSRFToken", csrftoken);
			},
			data: {
				"user_transcription_id": userTranscriptionID,
				"print_num": totalNum,
			},
			success: function (data) {
				$('#totalPrice').text(data.data.total_price);
			},
		});

		// $.ajax({
		// 	url: '/fe/print/sutra_edition/'+vid+'/orders',
		// 	data: {
        //         "delivery": [
        //             {
        //                 "name": name,
        //                 "phone": phone,
        //                 "address": address,
        //                 "num": num,
        //             },
        //         ],
		// 	},
        //     type: 'POST',
        //     beforeSend: function(xhr, settings) {
        //         xhr.setRequestHeader("X-CSRFToken", csrftoken);
        //     },

        //     success: function (data) {
        //        console.log(data)
        //     }

		// })
    })
</script>
</html>